<!DOCTYPE HTML>
<html>
    <head>
        <title>Dojo Demo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="/css/style.css"/>
        <link rel="stylesheet" href="/js/dojo161/dojo/resources/dojo.css"/>
        <link rel="stylesheet" href="/js/dojo161/dijit/themes/soria/soria.css"/>
        <link rel="stylesheet" href="/js/dojo161/dojox/image/resources/SlideShow.css"/>
        <link rel="stylesheet" href="/js/dojo161/dojox/image/resources/ThumbnailPicker.css"/>
        <link rel="stylesheet" href="/js/dojo161/dojox/widget/Portlet/Portlet.css">
        <link rel="stylesheet" href="/js/dojo161/dojox/layout/resources/GridContainer.css">
        <link rel="stylesheet" href="/js/dojo161/dojox/layout/resources/ExpandoPane.css">
        <script>
            djConfig = {
                parseOnLoad: true,
                isDebug: true
            }
        </script>
        <script type="text/javascript" src="/js/dojo161/dojo/dojo.js"></script>
        <script type="text/javascript" src="/js/charts.js"></script>
        <script type="text/javascript" src="/js/demo.js"></script>
        <script type="text/javascript" src="/js/jsPresentation.js"></script>
    </head>
    <body class="soria">
        <script type="text/javascript">
            dojo.registerModulePath("demo", "/js/demo");
            //Dijit modules
            dojo.require("dijit.layout.BorderContainer");
            dojo.require("dijit.layout.TabContainer");
            dojo.require("dijit.layout.ContentPane");
            dojo.require("dijit.layout.AccordionContainer");
            dojo.require("dijit.form.DateTextBox");
            dojo.require("dijit.form.ValidationTextBox");
            dojo.require("dijit.form.TimeTextBox");
            dojo.require("dijit.form.NumberSpinner");
            dojo.require("dijit.form.SimpleTextarea");
            dojo.require("dijit.form.ComboBox");
            dojo.require("dijit.form.Button");
            dojo.require("dijit.form.CheckBox");
            dojo.require("dijit.form.TextBox");
            dojo.require("dijit.Dialog");
            dojo.require("dijit.Calendar");
            dojo.require("dijit.ColorPalette");
            dojo.require("dijit.ProgressBar");
            dojo.require("dijit.TitlePane");
            dojo.require("dijit.Toolbar");
            dojo.require("dijit.Menu");
            dojo.require("dijit.Editor");
            dojo.require("dijit.Tree");
            //Dojox modules
            dojo.require("dojox.image.SlideShow");
            dojo.require("dojox.layout.GridContainer");
            dojo.require("dojox.widget.Portlet");
            dojo.require("dojox.widget.AutoRotator");
            dojo.require("dojox.widget.rotator.Fade");
            dojo.require("dojox.layout.ExpandoPane");
            //Dojo modules
            dojo.require("dojo.data.ItemFileReadStore");
            dojo.require("dojo.parser");
            dojo.require("demo");
        </script>
        <div id="appLayout" dojoType="dijit.layout.ContentPane"
             gutters="true" liveSplitters="true" doLayout="true" style="width: 100%; height: 100%">
            <div class="demoLayout" dojoType="dijit.layout.TabContainer" region="center"
                tabStrip="true" isContainer="true" style="width: 100%; height: 100%">
                <div dojoType="dijit.layout.ContentPane" id="content-slide"region="top"
                     title="Main presentation" isContainer="true" style="width: 100%; height: 100%">
                    <div dojoType="dojo.data.ItemFileReadStore" jsId="imageItemStore"
                        url="http://dojo-demo.local/data.json"  ></div>
                    <div id="slideshow1" dojoType="dojox.image.SlideShow"
                         noLink="true" imageWidth="100%" imageHeight="100%" style="width: 99%; height: 96%"></div>
                </div>
                <div dojoType="dijit.layout.ContentPane" region="left" title="Forms">
                    <div class="feature-demo">
                        <div class="formRow">
                            <label for="name1">Validation Text Box</label>
                            <span class="spanDijitDropDownButton">
                                <input type="text" name="name1" id="name1" dojoType="dijit.form.ValidationTextBox"
                                required="true" invalidMessage="Invalid Text.">
                            </span>
                        </div><br/>
                        <div class="formRow">
                            <label for="text1">Simple Textarea</label>
                            <span class="spanDijitDropDownButton">
                                <input type="text" name="text1" id="text1" value=""
                                   dojoType="dijit.form.SimpleTextarea" required="true" invalidMessage="Invalid Text.">
                            </span>
                        </div><br/>
                        <div class="formRow">
                            <label for="select1">Combo Box</label>
                            <span class="spanDijitDropDownButton">
                                <select dojoType="dijit.form.ComboBox" id="select1" name="fruit">
                                    <option selected="selected">
                                    Dojo
                                </option>
                                <option>
                                    jQuery
                                </option>
                                <option>
                                    Other
                                </option>
                                </select>
                            </span>
                        </div><br/>
                        <div class="formRow">
                            <label for="intspinner2">Number Spinner</label>
                            <span class="spanDijitDropDownButton">
                                <input id="intspinner2" dojoType="dijit.form.NumberSpinner"
                                   name="someNumber" value="10" smallDelta="10"  constraints="{min:9,max:1550,places:0}"/>
                            </span>
                        </div><br/>
                        <div class="formRow">
                            <label for="time1">Time Text Box</label>
                            <span class="spanDijitDropDownButton">
                                <input type="text" id="time1" dojoType="dijit.form.TimeTextBox"
                                   name="time1" value="T15:00:00" required="true" />
                            </span>
                        </div><br/>
                        <div class="formRow">
                            <label for="date1">Date Text Box</label>
                            <span class="spanDijitDropDownButton">
                                <input type="text" id="date1" dojoType="dijit.form.DateTextBox"
                                   name="date1" value="2011-06-25"/>
                            </span>
                        </div><br/>
                        <div class="formRow">
                            <label for="mycheck">Check Box</label>
                            <span class="spanDijitDropDownButton">
                                <input id="mycheck" name="mycheck" dojoType="dijit.form.CheckBox"/>
                            </span>
                        </div><br/>
                        <div class="formRow">
                            <label for="radio">Radio Button</label>
                            <span class="spanDijitDropDownButton">
                                <input type="radio" dojoType="dijit.form.RadioButton"
                                       name="drink" id="radioTwo" value="coffee" />
                            </span>
                        </div><br/>
                        <div class="formRow">
                            <label for="toggleButton">Button</label>
                            <span class="spanDijitDropDownButton">
                                <button id="toggleButton" dojoType="dijit.form.Button"
                                    iconClass="dijitEditorIcon dijitEditorIconCut">
                                    Accept
                                </button>
                            </span>
                        </div><br/>
                        <div class="formRow">
                            <label for="radio">Drop Down Button</label>
                            <span class="spanDijitDropDownButton">
                                <div dojoType="dijit.form.DropDownButton">
                                    <span>
                                        Register
                                    </span>
                                    <div dojoType="dijit.TooltipDialog">
                                        <label for="name">
                                            Name:
                                        </label>
                                        <input dojoType="dijit.form.TextBox" id="name" name="name" />
                                        <br>
                                        <label for="hobby">
                                            Hobby:
                                        </label>
                                        <input dojoType="dijit.form.TextBox" id="hobby" name="hobby" />
                                        <br>
                                        <button dojoType="dijit.form.Button" type="submit">
                                            Save
                                        </button>
                                    </div>
                                </div>
                            </span>
                        </div><br/><br/>
                        <div class="formRow">
                            <label for="radio">And much more!!</label>
                        </div>
                    </div>
                </div>
                <div dojoType="dijit.layout.ContentPane" title="Dijit Widgets">
                    <div class="feature-demo">
                    <div class="formRow">
                        <label for="toolbar">Toolbar</label>
                        <span class="spanDijitDropDownButton">
                            <div id="toolbar1" dojoType="dijit.Toolbar">
                                <div dojoType="dijit.form.DropDownButton">
                                    <span>
                                        Register
                                    </span>
                                    <div dojoType="dijit.Menu" contextMenuForWindow="true" style="display: none;">
                                        <div dojoType="dijit.MenuItem">Cut</div>
                                        <div dojoType="dijit.MenuSeparator"></div>
                                        <div dojoType="dijit.PopupMenuItem">
                                            <span>
                                                Enabled Submenu
                                            </span>
                                            <div dojoType="dijit.Menu" id="submenu2">
                                                <div dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">
                                                    Submenu Item One
                                                </div>
                                                <div dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">
                                                    Submenu Item Two
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div dojoType="dijit.form.Button" id="toolbar1.cut" 
                                    iconClass="dijitEditorIcon dijitEditorIconCut" showLabel="false">
                                    Cut
                                </div>
                                <div dojoType="dijit.form.Button" id="toolbar1.copy"
                                     iconClass="dijitEditorIcon dijitEditorIconCopy" showLabel="false">
                                    Copy
                                </div>
                                <div dojoType="dijit.form.Button" id="toolbar1.paste"
                                     iconClass="dijitEditorIcon dijitEditorIconPaste" showLabel="false">
                                    Paste
                                </div>
                                <!-- The following adds a line between toolbar sections -->
                                <span dojoType="dijit.ToolbarSeparator">
                                </span>
                                <div dojoType="dijit.form.ToggleButton" id="toolbar1.bold" 
                                     iconClass="dijitEditorIcon dijitEditorIconBold" showLabel="false">
                                    Bold
                                </div>
                            </div>
                        </span>
                    </div><br/>
                    <div class="formRow">
                        <label for="calendar">Calendar</label>
                        <span class="spanDijitDropDownButton">
                            <div dojoType="dijit.Calendar"
                                 onChange="dojo.byId('formatted').innerHTML=dojo.date.locale.format(arguments[0], {formatLength: 'full', selector:'date'})">
                            </div>
                        </span>
                    </div><br/>
                    <div class="formRow">
                        <label for="colorpalette">Color Palette</label>
                        <span class="spanDijitDropDownButton">
                            <div dojoType="dijit.ColorPalette" palette="7x10"></div>
                        </span>
                    </div><br/>
                    <div class="formRow">
                        <label for="progressbar">Progress Bar</label>
                        <span class="spanDijitDropDownButton">
                            <div dojoType="dijit.ProgressBar" style="width:300px" jsId="jsProgress"
                                id="downloadProgress" maximum="10">
                            </div>
                            <button dojoType="dijit.form.Button" onclick="download();"> Go!</button>
                        </span>
                    </div><br />
                     <div class="formRow">
                        <label for="titlepane">Title Pane</label>
                        <span class="spanDijitDropDownButton">
                            <div id="tp2" dojoType="dijit.TitlePane" title="I'm a TitlePane Too">
                                Click arrow to close me.
                            </div>
                        </span>
                     </div><br/>
                     <div class="formRow">
                        <label for="tooltip">Tooltip</label>
                        <span class="spanDijitDropDownButton">
                            <button id="button2" dojoType="dijit.form.Button">
                                Tooltip below
                            </button>
                            <div dojoType="dijit.Tooltip" connectId="button2" position="below">
                                a tooltip is displayed here!
                            </div>
                        </span>
                     </div><br/>
                    <div class="formRow">
                        <label for="menu"></label>
                        <span class="spanDijitDropDownButton">
                             <div dojoType="dijit.Menu" id="windowContextMenu" contextMenuForWindow="true"
                                style="display: none;">
                                <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCut"
                                onClick="alert('not actually cutting anything, just a test!')">
                                    Cut
                                </div>
                                <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCopy"
                                onClick="alert('not actually copying anything, just a test!')">
                                    Copy
                                </div>
                                <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconPaste"
                                onClick="alert('not actually pasting anything, just a test!')">
                                    Paste
                                </div>
                                <div dojoType="dijit.MenuSeparator">
                                </div>
                                <div dojoType="dijit.PopupMenuItem">
                                    <span>
                                        Enabled Submenu
                                    </span>
                                    <div dojoType="dijit.Menu" id="submenu1">
                                        <div dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">
                                            Submenu Item One
                                        </div>
                                        <div dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">
                                            Submenu Item Two
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </span>
                    </div><br/>
                    <div class="formRow">
                        <label for="menu">Editor</label>
                        <span class="spanDijitDropDownButton">
                            <div dojoType="dijit.Editor" id="editor1" onChange="console.log('editor1 onChange handler: ' + arguments[0])">
                                <p>
                                    It's very easy to create a word processor
                                </p>
                            </div>
                        </span>
                    </div>
                </div>
                </div>

                <div dojoType="dijit.layout.ContentPane" region="left" title="Dojox">
                    <div dojoType="dojox.layout.GridContainer" nbZones="2" opacity="5" hasResizableColumns="true"
                        allowAutoScroll="false" withHandles="true" dragHandleClass="dijitTitlePaneTitle"
                        style="width: 100%" acceptTypes="Portlet" isOffset="true">
                        
                        <div dojoType="dojox.widget.Portlet" id="dynPortlet1" dndType="Portlet"
                                 title="Portlet 'dynPortlet1'" content="portletContent1"
                                 closable="true" isContainer="true"toggleable="true" toggleable="true" extractContent="true">
                            <div id="chartTwo" style="width: 300px; height: 300px;">
                            </div>
                            <div id="legendTwo">
                            </div>
                        </div>
                        <div dojoType="dojox.widget.Portlet" id="dynPortlet2" dndType="Portlet" title="Portlet 'dynPortlet2'"
                             content="portletContent1" closable="true" isContainer="true"
                             toggleable="true" toggleable="true" extractContent="true">
                            <div id="chartNode" style="width:300px;height:320px;"></div>
                        </div>
                    </div>
                </div>
                <div dojoType="dijit.layout.BorderContainer" title="Layout" gutters="true"
                     liveSplitters="true" doLayout="true" style="width: 100%; height: 100%">
                    <div dojoType="dijit.layout.ContentPane" region="top" splitter="true" style="height: 10%;"></div>
                        <div dojoType="dojox.layout.ExpandoPane" title="Dojo hierarchy" maxWidth="275"
                        splitter="true" region="leading">
                            <div dojoType="dojo.data.ItemFileReadStore" jsId="coreStore"
                                url="http://dojo-demo.local/dojo-core.json"></div>
                            <div dojoType="dijit.tree.ForestStoreModel" jsId="coreModel"
                                store="coreStore" query="{type:'root'}"
                                rootId="coreRoot" rootLabel="Name" childrenAttrs="children">
                            </div>
                            <div dojoType="dijit.Tree" id="mytree" showRoot="false" model="coreModel">
                            </div>
                        </div>
                    <div dojoType="dijit.layout.ContentPane" region="right" splitter="true" style="width: 10%;"></div>
                    <div dojoType="dijit.layout.ContentPane" region="center" splitter="true" >
                         <div dojoType="dijit.layout.AccordionContainer" style="height: 400px;" >
                            <div dojoType="dijit.layout.ContentPane" title="First part">
                            </div>
                            <div dojoType="dijit.layout.ContentPane" title="Second part">
                            </div>
                            <div dojoType="dijit.layout.ContentPane" title="Another part">
                        </div>
                    </div>
                    <div dojoType="dijit.layout.ContentPane" region="bottom" splitter="true" style="height: 10%;"></div>
                </div>
            </div>
        </div>
    </div>
</html>
